<template>
  <div class="layout-container dynamic-table">
    <div class="layout-container-table">
      <CommonTable
        :data="dynamicTable"
        v-loading="loading"
        :showSelection="false"
        :showPagination="false"
        :showIndex="false"
      >
        <el-table-column prop="order" label="序号" />
        <el-table-column prop="hisSampleName" label="历史试验数据名称" />
        <el-table-column prop="computingModeName" label="计算方式" />
        <el-table-column prop="matchDegree" label="整体加权匹配度" />
      </CommonTable>
    </div>

    <div class="step-buttons common-buttons">
      <el-button type="primary" @click="onBack">返回</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import CommonTable from "@/components/common-table/index.vue";
import { httpResultVisiualDisplayList } from "@/api/similarityEvaluationSystem";

let $router = useRouter();
const route = useRoute();
const dynamicTable = ref<any>([]);
const loading = ref<boolean>(false);

onMounted(() => {
  onQuery();
});

// 查询数据
const onQuery = () => {
  const params = {
    sampleId: route.query.dealSampleId,
  };
  loading.value = true;
  httpResultVisiualDisplayList(params).then((res) => {
    const { dynamic } = res.data;
    loading.value = false;
    dynamic?.map((item: any, index: number) => {
      item.order = index+ 1
      if (item.computingMode === "DTW") {
        item.computingModeName = "基于动态时间弯曲的序列距离";
      } else if (item.computingMode === "shape") {
        item.computingModeName = "基于灰色关联度的形状相似性";
      } else if (item.computingMode === "cosine") {
        item.computingModeName = "融合注意力机制的动态特征向量相似度";
      }
      return item;
    });
    dynamicTable.value = dynamic;
  });
};

// 上一步
const onBack = () => {
  $router.push({
    path: "/similarityEvaluateSystem/resultList",
    query: {},
  });
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/buttons";
.dynamic-table {
  .layout-container-table {
    .el-button--small {
      background: transparent;
      color: rgba(24, 81, 237, 1);
    }
  }

  .step-buttons {
    display: flex;
    justify-content: center;
    box-shadow: 0px 0px 10px rgba(218, 222, 224, 1);
    padding: 10px 0;
  }
}
</style>
